$(function() {
    // 全局变量 被点击的数据的id
    let itemId;
    // 1 发送请求获取数据 渲染页面
    function getCategory() {
        // 1,1 发送ajax请求获取数据
        $.ajax({
            url: "/admin/category/list",
            success(res) {
                // 1,2 使用 模板引擎来渲染 art-template
                const tbodyHTML = template("tbody-tpl", { list: res.data });
                $(".category_table tbody").html(tbodyHTML);
            }
        })
    }
    getCategory();

    // 2 绑定了新增分类中 保存按钮的点击事件
    // 页面中有两个 class 都是等于 btn_opt
    // 为了确保dom元素准确
    $("#myModal .btn_opt").on("click", function() {
        // 2,1 获取分类名,分类别名
        const name = $("input[name='name']").val().trim();
        const slug = $("input[name='slug']").val().trim();
        // 2,2 发送请求 到后台完成添加
        $.ajax({
            url: "/admin/category/add",
            type: "post",
            data: {
                name,
                slug
            },
            success(res) {
                // console.log(res);
                // 打印失败
                if (res.code === 200) {
                    // 成功
                    $("#myModal").modal("hide");
                    // 渲染页面
                    getCategory();
                }
            }
        })
    })

    // 3 绑定编辑按钮 点击事件 用事件委托 因为是动态生成的
    $(".category_table").on("click", ".edit", function() {
            // 3,1 显示模态框
            $("#editModal").modal("show");
            // 3,2 页面渲染的时候已经提前把数据都挂载到tr标签上了,所以只需要获取tr标签自然就能获取到数据
            // parents 找祖先元素
            const item = $(this).parents("tr").data("item")
                // 3,3 将数据 渲染到 编辑模态框中的input标签内
            $("#editModal #name").val(item.name);
            $("#editModal #slug").val(item.slug);
            // 3,4 获取到被编辑的数据的id
            itemId = item.id
        })
        // 4 编辑模态框中的保存按钮 
    $("#editModal .btn_opt").on("click", function() {
            // console.log("fff");
            const name = $("#editModal #name").val();
            const slug = $("#editModal #slug").val();
            //  发送到后台完成修改
            $.ajax({
                url: "/admin/category/edit",
                type: "post",
                data: {
                    name,
                    slug,
                    id: itemId
                },
                success(res) {
                    if (res.code === 200) {
                        $("#editModal").modal("hide");
                        // 渲染页面
                        getCategory();
                    }
                }
            })


        })
        // 5 删除功能
    $(".category_table").on("click", ".delete", function() {
        // 谁调用了代码（函数）  this 就是谁
        // console.log(this);
        /* 
        试了另一种方法，不可以，this会被改变  要使用变量来接收
        用箭头函数也可以 （对于箭头函数加深理解）
        */

        layer.confirm("确定删除？", { icon: 3, title: '提示' }, index => {
            /*
             箭头函数 不会对里面的this做任何改变 谁调用了this this就等于谁
            箭头函数中的this的指向 =>好像没有写过函数一样
            没有使用函数的时候 this 指向了谁 箭头函数中的this 就类似没有使用过函数 一样
            */

            const id = $(this).parents("tr").data("item").id;

            $.ajax({
                url: "/admin/category/delete",
                type: "post",
                data: { id },
                success(res) {
                    console.log(res);
                    if (res.code === 200) {
                        // 删除成功
                        getCategory();
                        layer.close(index);

                    }
                }
            })
        })
    })
})